<template>
	<view class="emoji">
		<view class="emoji-row" v-for="(row,i) in emojilist" :key="'r'+i">
			<view class="emoji-col" v-for="(col,j) in row" :key="'c'+j" @tap="send(col)">
				{{col}}
			</view>
		</view>
		<view class="emoji-send">
			<view class="emoji-send-btn" @tap="print">
				发送
			</view>
			<view class="emoji-del-btn">
                 <image src="../../static/img/chatroom/back.png" @tap="del"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import emojilist from '@/common/js/emoji.js'
	export default {
		name: "emoji",
		data() {
			return {};
		},
		props: {
			num: {
				type: Number,
				default: 7
			}
		},
		methods:{
			send(e){
				this.$emit('emoji',e)
			},
			print(){
				this.$emit('print')
			},
			del(){
				this.$emit('del')
			}
		},
		computed: {
			// 将表情数组转为二维数组 ，默认为7个一行，可以传入props项num来设定每行个数
			emojilist() {
				var arr = []
				var brr = []
				for (var i = 0; i < emojilist.length; i++) {
					if (i % this.num == 0 && i != 0) {
						arr.push(brr)
						brr = []
						brr.push(emojilist[i])
					} else {
						brr.push(emojilist[i])
					}
				}
				return arr
			}
		}
	}
</script>

<style lang="scss">
	.emoji {
		padding: 20rpx 32rpx;
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
		&::after{
			content: "";
			display: block;
			height: 100rpx;
		}
		.emoji-row {
			display: flex;			
			.emoji-col {
				flex-grow: 1;
				text-align: center;
				font-size: 50rpx;
				line-height: 80rpx;
			}
		}
		.emoji-send{
			position: fixed;
			bottom: -10rpx;
			right: 0;
			width: 240rpx;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #eee;
			padding:10rpx 30rpx 20rpx;
			box-sizing: border-box;
			box-shadow: -2px -2px 20px 20px rgba(238, 238, 238, 0.6);
		}
		.emoji-send-btn{
			width: 100rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			background-color: rgba(255, 228, 49, .9);
			border-radius: 20rpx;
			box-sizing: border-box;
		}
		.emoji-del-btn{
			width: 60rpx;
			text-align: center;
			height: 60rpx;
			padding: 10rpx 0;
			background-color: rgba(255, 228, 49, .9);
			border-radius: 20rpx;
			box-sizing: border-box;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
